<template>
  <div class="background">
    <el-container style="height: 100vh; ">
      <el-aside class='el-aside' style="height:100%;" width="186px">
        <img id="image" src="../../assets/logo.png">
        <el-menu active-text-color="yellow" background-color="#1a1919b2 " router
                 style="color:darkorange;overflow-x:hidden" text-color="darkorange">
          <el-submenu class="aside-group" index="1">
            <template slot="title"><i class="el-icon-message" style="color: darkorange;"></i>选票中心</template>
            <el-menu-item-group class="aside-group">
              <el-menu-item class="aside-group2" index="/users/shop">车次选择
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu class="aside-group" index="2" style="border-bottom: 1px solid darkorange">
            <template slot="title"><i class="el-icon-tickets" style="color: darkorange;"></i>订单中心</template>
            <el-menu-item-group class="aside-group">
              <el-menu-item class="aside-group2" index="/users/order">购票记录</el-menu-item>
              <el-menu-item class="aside-group" index="/users/refOrder">退票记录</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container class="background2">
        <el-header class="el-header" height="75.5px">
          <span>{{ headerName }}</span>
          <el-dropdown>
            <i class="el-icon-user"
               style="font-size:30px;margin-left:10px;margin-right:10px;color:darkorange;"></i>
            <el-dropdown-menu slot="dropdown" class="dropdown">
              <el-dropdown-item class="dropdown1" @click.native="logOut()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main class="main" style="width: 100%">
          <router-view :headerId="headerId"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headerName: '',
      headerId: ''
    }
  },
  methods: {
    logOut() {
      this.$router.push({path: '/login'})
      this.$http.get("/logout")
    }
  },
  created() {
    this.headerName = this.$route.query.userName
    this.headerId = this.$route.query.userId
  }
}
</script>

<style scoped>
#image {
  height: 70px;
  width: 185px;
}

.main {
  border-right: solid 2px darkorange;
  border-bottom: solid 2px darkorange;
  border-left: solid 2px darkorange;
}

.dropdown1 {
  color: darkorange;
  background-color: #1a1919b2;
}

.dropdown {
  color: darkorange;
  background-color: #1a1919b2;
  border: 1px solid darkorange;
}

.el-header {
  background-color: #1a1919b2;
  color: darkorange;
  line-height: 75px;
  font-size: 30px;
  text-align: right;
  border-bottom: solid 2px darkorange;
  border-right: solid 2px darkorange;
  border-top: solid 2px darkorange;
}

.el-aside {
  width: 185px;
  color: #1a1919b2;
  background-color: #1a1919b2;
  border-left: solid 2px darkorange;
  border-top: solid 2px darkorange;
  border-bottom: solid 2px darkorange;
}

.background {
  background-color: #000000b2;
}

.aside-group {
  min-width: 185px;
  max-width: 185px;
  width: 185px;
  background-color: #1a1919b2;
  color: darkorange;
  border-top: 1px solid darkorange;
}

.aside-group2 {
  margin-top: -15px;
  min-width: 185px;
  max-width: 185px;
  width: 185px;
  background-color: #1a1919b2;
  color: darkorange;
  border-top: 1px solid darkorange;
}
</style>